<template>
	<div class="des1">
		<ul>
			<li v-for="item in destination1Arr" :key='item.id'>
				<router-link to="/">
					<img :src="item.imgUrl" />
					<h4>{{item.text}}</h4>
					<p>{{item.txt}}</p>
				</router-link>
			</li>
		</ul>
		<router-link to="/" v-for="item in destination2Arr" :key="item.id">
			<div>
				<h3>{{item.text}}</h3>
				<em>{{item.txt}}</em>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default{
		name:'DestinationDay2',
		props:{
			propsDestinationDay2:{
				type:Object,
				default:function(){
					return{}
				}
			}
		},
		data(){
			return{
				destination1Arr:[],
				destination2Arr:[]
			}
		},
		watch:{
			propsDestinationDay2(){
				this.destination1Arr=this.propsDestinationDay2.Destination_deArr1
				this.destination2Arr=this.propsDestinationDay2.Destination_deArr2
			}
		},
		created(){
				this.destination1Arr=this.propsDestinationDay2.Destination_deArr1
				this.destination2Arr=this.propsDestinationDay2.Destination_deArr2
		}
		
	}
</script>

<style scoped>
	a{
		text-decoration: none;
	}
	.des1{
		
		width: 95%;
		margin: 0 auto;
	}
	.des1 ul{
		width: 100%;
		display: flex;
	}
	.des1 ul li{
		width: 33%;
		margin-right: 0.15rem;
		position: relative;
	}
	.des1 ul li:nth-child(3){
		margin-right: 0rem;
	}
	
	.des1 ul li a img{
		width: 100%;
	}
	.des1 ul li:nth-child(1) a img{
		border-top-left-radius: 0.2rem ;
		border-bottom-left-radius: 0.2rem ;
		
		
	}
	.des1 ul li:nth-child(3) a img{
		border-top-right-radius: 0.2rem ;
		border-bottom-right-radius: 0.2rem ;
	}
	.des1 ul li a h4{
		position: absolute;
		top: 55%;
		left: 50%;
		margin-left: -0.85rem;
		font-size: 0.46rem;
		font-weight: bold;
	
		color: white;
	}
	.des1 ul li:nth-child(2) a h4{
		margin-left: -0.5rem;
	}
	.des1 ul li a p{
		position: absolute;
		top: 75%;
		left: 50%;
		font-weight: bold;
		margin-left: -0.69rem;
		font-size: 0.35rem;
		color: #b4b0af;
	}
	.des1 a{
		color: #000000;
	}
	.des1 a div{
		width: 30%;
		margin: 0.1rem;
		border: 0.05rem solid gainsboro;
		border-radius: 0.2rem;
		float: left;
		height: 1.2rem;
		text-align: center;
		line-height: 1.2rem;
		position: relative;
	}
	.des1 a div h3{
		font-size: 0.5rem;
		font-weight: bold;
	}
	.des1  em{
		height: 0.4rem;
		background-color: #ffdd3f;
		position: absolute;
		top: 0;
		border-radius: 0 0 0.3rem 0;
		left: 0;
		line-height: 0.4rem;
	}
</style>
